HTML link 속성

❓질문

HTML link 요소의 rel 속성 값 preconnect, preload, prefetch에 대해 설명해주세요.

💡 조사하기전 내가 알고 있던 내용

link 요소 rel 속성값에 대해서 잘 써보지않아 정확한 기능은 몰랐지만 prefetch라는 단어를 보니 알거같은건

preload 속성은 특정 리소스를 미리 가져오도록 합니다 이를 보통 웹폰트등에 사용하여 혹시 모를 폰트 다운에 있어서 네트워크 지연이 있을시 잠시 기본 폰트가 보이게 되는데 이런걸 방지하는 용도로 사용됩니다.

prefetch 속성은 마우스를 링크를 가져다대거나 하는등 다음으로 이동할 화면이 가능성이 높다면 해당 페이지에 대한 리소스를 미리 받습니다.
이는 미리 받은 리소스로 사용자 경험을 올릴순 있지만 그래도 과도한 사용은 불필요한 리소스를 다운받게 하여 브라우저가 느려질 수 있습니다.

precoonnet는 아마 미리 연결을 해보는것 같습니다. 미리 서버와 통신하여 핸드쉐이크 과정을 거쳐 리소스를 미리 받을 수 있는 상태로 만들어두는 속성인것 같습니다.

🏫 정리한 내용

preconnect는 브라우저가 특정 origin에 대한 네트워크 연결을 미리 설정하도록 지시합니다. 이를 통해 DNS 조회, TLS 핸드셰이크, TCP 연결을 미리 완료하여 리소스 로드 지연을 줄일 수 있습니다. 외부 API나 CDN의 리소스를 사용할 경우 preconnect를 사용하면 첫 번째 요청의 대기 시간을 줄일 수 있습니다.

<link rel="preconnect" href="https://external-resource.com" crossorigin="anonymous">

preconnect는 리소스 자체를 로드하지 않고, 요청할 origin과의 연결만 미리 준비합니다. 자주 사용하는 외부 리소스의 도메인에 대해 적용하는 것이 효과적입니다.